목차
01 프로젝트 개요
02 프로젝트구성 역할
03 프로젝트 수행 절차방법
04 프로젝트 수행 결과
05 자체 평가 의견
#트렌드 #여행 #스탬프투어
#멋쟁이
OpenAPI활용GPS인증 대구 명소 스탬프 투어 앱 'DanDi'구현
단디는 '제대로, 똑바로'의 방언으로 직접 찾아가 스탬프를 찍는 기존의 스탬프 투어와 다르게
어플을 제작하여 QR인증을 통하여 대구를 방문하는 관광객들이 제대로 대구 명소를 즐길
있도록 하기 위해 제작
01 프로젝트 개요
주제
기획의도
OpenAPI활용GPS인증 대구명소 투어 'DanDi구현
코로나19 이후로 해외여행보다는
국내여행 선호도가 높아짐
GPS 활용하여 주변 관광지 홍보
오락 요소를 넣어 흥미 유발
지역경제 활성화 스탬프 투어를 활용한
기존의 관광지 홍보
대구로 관광객을 유치함으로 지역 경제 활성화
Persona
Persona
이름 박연진
직업 인플루언서
성격 여행 SNS계정 운영하는 인플루언서
최신 유행에 민감하고, 편한 것을 추구
흔한 보다 독특하고 특이한선호
기존의 아날로그 스탬프 투어는 번거롭고 불편해!
이런 점이 보완된 스탬프 투어 어플을 만들 없을까?”
정형화된 스탬프 투어로 특색이 없다.
기존의 스탬프 투어는 종이를 들고 다녀야 해서
잃어버릴까 불안하고 불편하다.
현재 위치를 알 수 없어 다음 목적지까지의 최적 경로를
찾기 힘들다.
여행지의 명소를 하나하나 찾아야하는 번거로움이 있다.
스탬프 투어 완료적절한 보상이 없어 참여 동기가
부족하다.
01 프로젝트 개요
프로젝트 주제기획 의도
현업 이슈
문제
-타지역의 경우 지역 경제를 살리기 위해 스탬프 투어 활성화
-대구 지역은 스탬프 투어 부재
-코로나로 인해 지역 경제가 침체되어 있음
-대구 스탬프 투어는 한구역에 한정 되어있음
-대구 스탬프 투어는 오프라인으로만 구성되어 있음
-오프라인 스탬프 투어는 스탬프 팜플렛 분실 우려가 있음
01 프로젝트 개요
{
프로젝트 기술서
프로젝트 구현 내용
컨셉
훈련 내용 관련 기술
-지역경제 활성화 스탬프 투어를 활용한 기존의 관광지 홍보
-포인트 시스템을 도입하여 성취감과 흥미 유발
-하이브리드앱 구현
-GPS API 기술
-데이터베이스 설계 구현
-형상관리 도구 활용 배포
01 프로젝트 개요
개발 환경(개발 언어)
개발툴 개발 언어
01 프로젝트 개요
워크플로우
시작 대구 명소 6곳
해당지역 스탬프
스탬프 6 수집 완료
포인트적립/교환 종료
01 프로젝트 개요
플로우차트
시작
로그인
회원가입
지도
QR인증
스탬프
메뉴
이용안내
어플소개
쿠폰교환
마이페이지
고객센터
로그아웃
01 프로젝트 개요
02 프로젝트구성 역할
구성역할
최윤석 남예린 이혜민 정연진 방선연
팀장 / 퍼블리싱 UI/UX 디자인 퍼블리싱 UI/UX 디자인 프론트엔드
프론트엔드 백엔드
개발기간
03 프로젝트 수행 절차방법
04 프로젝트 수행 결과
UI/UX 설계(와이어프레임)
스플레시 로그인 회원가입 마이페이지
04 프로젝트 수행 결과
UI/UX 설계(와이어프레임)
둥근 아이콘 클릭시 이용안내 클릭시메인
04 프로젝트 수행 결과
UI/UX 설계(와이어프레임)
지도 스탬프 위치 지도 나의 위치 지도
04 프로젝트 수행 결과
UI/UX 설계(와이어프레임)
스탬프 QR 카메라 QR 촬영시 쿠폰교환 클릭시
04 프로젝트 수행 결과
UI/UX 디자인(스타일 가이드)
04 프로젝트 수행 결과
UI/UX 디자인(프로토타입)
회원가입로그인스플레시 마이페이지
04 프로젝트 수행 결과
UI/UX 디자인(프로토타입)
Dandi? 클릭시둥근 아이콘 클릭시메인 이용안내 클릭시
04 프로젝트 수행 결과
UI/UX 디자인(프로토타입)
지도보기 클릭시포인트 클릭시
지도 나의 위치 확인 클릭시
04 프로젝트 수행 결과
UI/UX 디자인(프로토타입)
QR 스캔시카메라쿠폰 QR 스캔 성공시 쿠폰 교환 클릭시
04 프로젝트 수행 결과
하이브리드구현
1. Router이용해 페이지 분할
-React
04 프로젝트 수행 결과
하이브리드구현
2. NavLink이용해 해당 페이지로 이동 설정
-React
04 프로젝트 수행 결과
OpenAPI 기술 활용 (GPS API활용)
1. 카카오API 사용을 위한 KEY설정
2. API 데이터 호출
-javascript, axios, ajax, json
04 프로젝트 수행 결과
3. API 호출로 가져온 데이터 location_list에 저장
4. geolocation API 사용하여 현재 위치 불러오기
OpenAPI 기술 활용 (GPS API활용)
-javascript, axios, ajax, json
04 프로젝트 수행 결과
5. 고객이 클릭한 장소 위도, 경도를 저장하여 지도 보여주기
OpenAPI 기술 활용 (GPS API활용)
-javascript, axios, ajax, json
04 프로젝트 수행 결과
1. MySQL활용하여 회원,
인증장소 목록과 장소와 관련된
힌트 목록을 불러올있는 hint
데이터베이스 설계구현 (ER 다이어그램)
-javascript, mysql
member
no
INT
id
VARCHAR(255)
pass
VARCHAR(255)
point
INT
location
no
INT
name
VARCHAR(45)
code
VARCHAR(45)
Latitude
FLOAT
longitude
FLOAT
record
no
INT
member_no
INT
location_no
INT
datetime
TIMESTAMP
hint
no
INT
location_no
INT
address
VARCHAR(50)
description
VARCHAR(255)
picture_path
VARCHAR(255)
04 프로젝트 수행 결과
1. 로그인 버튼 클릭
데이터베이스 설계구현
(회원가입로그인 기능 구현)
-javascript, mysql, node.js
2. 로그인 api값을 보내주는 함수 실행
04 프로젝트 수행 결과
3. 로그인을 위한 login함수 실행
데이터베이스 설계구현
(회원가입로그인 기능 구현)
-javascript, mysql, node.js
04 프로젝트 수행 결과
1. 회원 가입을 위한 register 함수 실행
-bycrypt사용하여 패스워드 암호화하여 DB저장
데이터베이스 설계구현
(회원가입로그인 기능 구현)
-javascript, mysql, node.js
04 프로젝트 수행 결과
1. 작업이 모두 끝난 리액트 파일을 build
2. Build파일을 githubpush한다
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
3. Netlify깃허브를 연동하여 웹에 배포
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
4. 배포가 완료되면 도메인 주소를 보기 좋게 변경
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
5. 변경된 도메인 주소
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
6. 안드로이드 스튜디오를 이용해 만들기
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
7. Netlify에서 만들어진 도메인 주소를
PageInfo 파일에 작성
8. 어플 아이콘 만들기
04 프로젝트 수행 결과
9. 스플레시 화면 넣기
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
10. Apk 어플로 빌드하기
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
04 프로젝트 수행 결과
11. Key 지정된 위치에 없으면
apk생성되지 않음
key위치를 모르겠다면 새로 만들어야함
형상관리 도구 활용 및 앱 배포
-Github, Netlify, Android Studio
12. 해당 위치에 apk생성됨
-https://dandi21.netlify.app
-Te st I D / P W : u s er 1 / 1 2 34